<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
	<script src="js/socket.io.js"></script>
	<script src="js/jquery-3.3.1.min.js"></script>

    <title>WebSocket 聊天室</title>
  </head>
  <body>
	姓名：<input type="text" id="name" />
	<button id="button" onclick="login()">登录</button>
	<br/><br/>
    消息：<textarea type="text" id="message" ></textarea>
	<button id="button" onclick="send()">发送</button>
	
	<ul id="content">
	</ul>
	
	<script type="text/javascript">
		var socket = io("ws://localhost:1234");
		var username = "";
		socket.on("connect", function(){
			console.log("连接成功");
		});
		// 监听服务器端 msg 推送
		socket.on("msg", function(data){
			// code 200 为登录状态码
			if(data.code == 200){
				console.log("登录成功");
				return ;
			}
			// 只有登录用户才能接受消息
			if(username != ""){
				if(data.user == username){
				$("#content").append("<li style='color:red;'>"+data.user+" : "+data.msg+"</li>");
				}else{
					$("#content").append("<li style='color:blue;'>"+data.user+" : "+data.msg+"</li>");
				}
			}
		});
		
		// 监听连接断开
		socket.on("disconnect", function(){
			console.log("断开连接");
		});
		
		// 用户登录
		function login(){
			username = $("#name").val();
			if(username == null || username == ''){
				console.log("请输入用户名");
				return ;
			}
			// 给服务器端发送login 事件
			socket.emit("login", username);
		}
		
		// 发送消息到服务器
		function send(){
			socket.emit("mySend", $("#message").val());
			$("#message").val("");
		}
	</script>
  </body>
</html>